<template>
  <div class="songSheetBox">
    <ul class="musicBox">
      <router-link
        :to="{ name: 'songsheetdetail', query: { id: item.id } }"
        tag="li"
        v-for="(item, index) in songSheetObj.playlists"
        :key="index"
        class="musicItem"
      >
        <div class="imgBox">
          <img class="musicImg" :src="item.coverImgUrl" alt="" />
          <div class="musicplayNumBox">
            <div class="headset"></div>
            <span class="palyNumBox"
              >{{ parseInt(item.playCount / 10000) }}万</span
            >
            <div class="playBtn" @click.stop="PlayClick(item.id)"></div>
          </div>
        </div>
        <p class="itemName">{{ item.name }}</p>
      </router-link>
    </ul>
    <div class="pageBox">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="songSheetObj.total"
        :page-size="pagelimit"
        :current-page.sync="contnetPage"
        :hide-on-single-page="true"
        @current-change="pageNumChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { songSheetDetail } from "@/api";
import { mapState, mapActions } from "vuex";
export default {
  props: {
    songSheetObj: {
      type: Object,
      default: {},
    },
    pagelimit: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      contnetPage: 1,
    };
  },
  methods: {
    ...mapActions("musicStore", ["songSheetPlay"]),
    PlayClick(id) {
      //直接点击播放
      songSheetDetail({ id }).then((res) => {
        this.songSheetPlay(res.playlist.tracks);
      });
    },
    pageNumChange() {
      this.$emit("getSongListContent", this.contnetPage);
    },
  },
};
</script>

<style lang="scss" scoped>
.songSheetBox {
  .musicBox {
    margin-top: 20px;
    .musicItem {
      display: inline-block;
      width: 140px;
      height: 188px;
      font-size: 14px;
      overflow: hidden;
      padding: 0 19px 30px 19px;
      .imgBox {
        width: 140px;
        height: 140px;
        position: relative;
        .musicImg {
          width: 100%;
          height: 100%;
        }
        .musicplayNumBox {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          font-size: 12px;
          height: 27px;
          background-position: 0 -537px;
          color: #ccc;
          background-image: url("./../../assets/imges/background.png");
          display: flex;
          align-items: center;
          .headset {
            width: 14px;
            height: 11px;
            vertical-align: middle;
            background-position: 0 -24px;
            margin: 9px 5px 9px 10px;
            display: inline-block;
            background-image: url("./../../assets/imges/btnIcon.png");
          }
          .playBtn {
            width: 16px;
            background-image: url("./../../assets/imges/btnIcon.png");
            height: 17px;
            display: inline-block;
            padding-right: 10px;
          }
          .palyNumBox {
            flex: 1;
          }
        }
      }
      .itemName {
        margin: 8px 0 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .pageBox {
    text-align: center;
  }
}
</style>